<!doctype html>
<html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<!-- 插件css -->
	<link rel="stylesheet" type="text/css" href="css/LArea.css">
	<link rel="stylesheet" type="text/css" href="css/flex.css">
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<title>XuLuo</title>
	<style type="text/css">
		input{border: 1px solid #ccc;padding: 5px 10px;}
	</style>
</head>
<body>
	<input id="area" type="text" readonly=""/>
    <input id="areaV" type="hidden"/>
    <!-- 插件js -->
	<script type="text/javascript" src="js/LArea.min.js"></script>
	<script type="text/javascript">
		// 区域
		var provs_data = [{
		    "text": "广东省",
		    "value": "1"
		}, {
		    "text": "安徽省",
		    "value": "2"
		}];
		var citys_data = {
		    "1": [{
		        "text": "深圳市",
		        "value": "11"
		    },{
		        "text": "广州市",
		        "value": "12"
		    }],
		    "2": [{
		        "text": "合肥市",
		        "value": "21"
		    },{
		        "text": "安庆市",
		        "value": "22"
		    }]
		};
		var dists_data = {
		    "11": [{
		        "text": "福田区",
		        "value": "111"
		    }, {
		        "text": "南山区",
		        "value": "112"
		    }],
		    "12":[{
		    	"text":"番禺",
		    	"value":"121"
		    },{
		    	"text":"从化",
		    	"value":"122"
		    }],
		    "21": [{
		        "text": "瑶海区",
		        "value": "211"
		    }, {
		        "text": "开发区",
		        "value": "212"
		    }],
		    "22": [{
		        "text": "宿松县",
		        "value": "221"
		    }, {
		        "text": "潜山县",
		        "value": "222"
		    }]
		};
		var Area = new LArea();
	    Area.init({
	        'trigger': '#area',
	        'valueTo': '#areaV',
	        'keys': {
	            id: 'value',
	            name: 'text'
	        },
	        'type': 2,
	        'data': [provs_data, citys_data, dists_data]
	    });
	    $('#area').val('广东省,深圳市,南山区');
	    $('#areaV').val('1,11,112');
	    Area.value=[0,0,1];//默认地址，顺序索引
	</script>
</body>
</html>